﻿@model ManageTagsViewModel
@{
    ViewBag.Title = Strings.Tags;
}
@section head {
    <style type="text/css">
        .tagEdit
        {
            padding: 0;
        }
        .links a
        {
            float: right;
            margin-left: 5px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            hideLinks();

            $(".tagEditor").each(function () {
                $(this).data("restore", $(this).val());
            })

            $(".tagEditor").bind("change keyup", function () {
                if ($(this).val().length > 0) {
                    $(this).removeClass("input-validation-error");
                    $(this).closest("tr").find("td:nth-child(3) > a").show();
                }
                else {
                    $(this).addClass("input-validation-error");
                    hideLinks();
                }
            });

            $(".cancel").click(function () {
                var input = $(this).closest("tr").find("td:nth-child(2) > input.tagEditor");
                input.val(input.data("restore"));
                $(this).closest("tr").find("td:nth-child(3) > a").hide();
            });

            $(".save").click(function () {
                var tagId = $(this).closest("tr").attr("id");
                var input = $(this).closest("tr").find("td:nth-child(2) > input.tagEditor");
                $.post('@Url.Action("Edit","Tag")', { id: tagId, name: input.val() }, function (data) {
                    if (data.Success == true) {
                        input.data("restore", input.val());
                        hideLinks();
                    }
                    else {
                        alert(data.Message);
                    }
                });
            });

            function hideLinks() {
                $("#tags").find("tr > td:nth-child(3) > a").hide();
            }

            $("#SelectAll").click(function () {
                $("input:checkbox").each(function () {
                    $(this).attr("checked", "checked");
                });
            });

            $("#ClearAll").click(function () {
                $("input:checkbox").each(function () {
                    $(this).removeAttr("checked");
                });
            });
        });
    </script>
}
<fieldset class="shaded">
    <legend>@Strings.Tags</legend>
    <div>
        <a href="javascript:void(0)" id="SelectAll">@Strings.Select</a> <a href="javascript:void(0)"
            id="ClearAll">@Strings.Clear</a>
    </div>
    <br />
    @using (Html.BeginForm("Delete", "Tag", new { id = "tagForm" }))
    { 
        @(Html.Grid(Model.Data)
                .Attributes(id => "tags")
                .RowStart(row => String.Format("<tr id='{0}'>", row.TagId))
                .Columns(column =>
                {
                    column.For(x => String.Format("<input type='checkbox' name='tagIds' id='tagIds' value='{0}' />", x.TagId)).Attributes(width => "20px").SortColumnName("Name").Encode(false);
                    column.For(x => String.Format("<input type='text' value='{0}' class='tagEditor required' />", x.Name)).Named(Strings.Name).Encode(false);
                    column.For(x => String.Format("<a href='javascript:void(0);' class='save'>{0}</a> ", Strings.Save) +
                                    String.Format("<a href='javascript:void(0);' class='cancel'>{0}</a>", Strings.Cancel)).Attributes(width => "100px").Encode(false);
                })
            .Sort(Model.GridSortOptions))          
        <br />        		
        <input type="submit" id="btnDelete" value='@Strings.Delete' />	       
    }
</fieldset>
